<!-- 单页面需要多个上传组件 -->
<!-- 多图 -->
<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :before-close="closeDialog" :title="title">
			<el-upload :list-type="listType" :action="$store.state.baseUrl + 'cdc/api/common/upload'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="list" name="file" multiple :on-exceed="handleExceed" :limit="limit" :data="{ module: 'wzwood', type: uploadType }" :on-success="handleAdd" :headers="{ token: $store.state.token }">
				<!-- <i class="el-icon-plus"></i> -->
				<el-button size="small" type="primary" v-if="type == 'upload'">点击上传</el-button>

				<!-- <div slot="file" slot-scope="{ file }">
          <el-image
            v-if="file.url"
            class="el-upload-list__item-thumbnail"
            :src="file.url"
            :preview-src-list="[file.url]"
          >
          </el-image>
        </div> -->
			</el-upload>
			<el-button style="margin-top:20px" size="small" @click="batchSubmit" type="primary" v-if="totalUp">全部保存提交</el-button>
			<el-dialog :append-to-body="true" :visible.sync="dialogVisible4">
				<img width="100%" :src="dialogImageUrl" :preview-src-list="[dialogImageUrl]" alt="" />
			</el-dialog>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: 'upload',
	props: {
		dialogVisible: false,
		totalUp: false,
		list: Array,
		listType: {
			type: String,
			default: 'picture',
		},
		uploadType: {
			type: String,
			default: '',
		},
		limit: {
			type: Number,
			default: 9999,
		},
		type: {
			type: String,
			default: 'upload', //upload 上传 look 查看
		},
		title: {
			type: String,
			default: '上传文件',
		},
	},
	data() {
		return {
			dialogImageUrl: '',
			dialogVisible4: false,
		};
	},
	methods: {
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制上传 1 个文件，本次选择了 ${
					files.length
				} 个文件，文件总数 ${files.length + fileList.length} `
			);
		},
		handlePictureCardPreview(file) {
			console.log(file);
			if (file.url.indexOf('http') == -1) {
				//老数据转换
				file.url = this.$store.state.openUrl + this.lookUrl(file.url);
			}
			if (file.url.indexOf('pdf') != -1) {
				window.open(file.url);
			} else {
				this.dialogVisible4 = true;
				this.dialogImageUrl = file.url;
			}
		},
		lookUrl(url) {
			//木材老数据附件 转换格式
			var url_new = url.split('_');
			var url_type = url_new[0];
			if (url_new.length == 2) {
				var dir1 = url_new[1].substr(0, 4);
				var dir2 = url_new[1].substr(4, 2);
				var dir3 = url_new[1].substr(6, 2);
				return (
					'/Uploads/' +
					url_type +
					'/' +
					dir1 +
					'/' +
					dir2 +
					'/' +
					dir3 +
					'/' +
					url
				);
			}
		},
		handleRemove(file) {
			this.$emit('handleRemove', file);
		},
		handleAdd(response, file, fileList) {
			console.log('上传成功', response, file, fileList);
			fileList.map((item, index) => {
				if (item.response) {
					fileList[index] = {
						url: response.data[0].link,//提交的时候和link替换回来 因为url字段不全
						url2: response.data[0].url,
						sha1: response.data[0].sha1,
            uid:item.uid,
            name:item.name,
					};
				} else {
					// arr.push(item);
				}
			});
			this.$emit('handleAdd', fileList, response);
		},
		batchSubmit() {
			console.log('全量提交');
			this.$emit('batchSubmit');
		},
		closeDialog() {
			console.log('close', this.title);
			this.$emit('close');
		},
	},
};
</script>
